<template>
  <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

//数据
const x_data = ref(['2021', '2022', '2023','2024'])
const y_data = ref([38.9,30.6, 27.5, 53.72])

//1. 创建dom引用
const chart = ref()

// setup组合式api都是在dom元素挂载之前执行
// echart的渲染时机是在dom元素挂载之后，所以需要将代码写在onMounted()钩子函数中
onMounted(() => {
  // 2.基于创建好的dom，初始化echarts实例
  const myChart = echarts.init(chart.value);

  // 3.指定数据和配置项
  const option = {
      //背景颜色
      backgroundColor: "white",
      //标题
      title: {
          text: "图1 七大行业税收与总税收对比图",
          left: "center",
          bottom: 5,
          show: false,
          textStyle: {
              fontFamily: "SimHei",
              fontSize: 12
          }
      },
      //图例
      legend: {
          //距离顶部的距离
          top: 10,
          //文本样式设置
          textStyle: {
              fontFamily: "Arial",
              fontWeight: "bold",
              fontSize: 15,
              color:"black"
          }
      },
      //绘图网格
      grid: {
          left: 66,
          right: 20,
          bottom: 40,
          top: 40,
          // width:500,
          // height:190,
      },
      //下载工具
      toolbox: {
          show: true,
          feature: {
              dataZoom: {
                  yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {
                  // 导出图片的分辨率
                  pixelRatio: 20
              },

          }
      },
      // x轴
      xAxis: {
          type: 'category',
          //控制刻度线显示
          axisTick: false,
          //刻度标签配置
          axisLabel: {
              fontFamily: "Arial",
              fontSize: 20,
              fontWeight: "bold",
              color:"black",
          },
          data: x_data.value
      },
      // y轴
      yAxis: {
          type: 'value',
          // y轴标题设置
          name: "单位(亿元)",
          nameGap: 35,
          nameLocation: "center",
          nameTextStyle: {
              fontSize: 15,
              fontFamily: "Arial",
              color:"black"
          },
          //y轴轴线
          axisLine: {
              show: false
          },
          //刻度标签
          axisLabel: {
              fontFamily: "Arial",
              fontSize: 20,
              // fontWeight: "bold",
              color:"black",
              
          },
          // 控制分割线是否显示
          splitLine: {
              show: true,
              lineStyle: {
                  color: '#ddd',
                  width: 1,
                  type: "dashed",
                  opacity: 0.5
              }
          }
      },
      // 数据项
      series: [
          {
              type: 'bar',
              name: "税收合计",
              data: y_data.value,
              //柱子宽度
              barWidth: 27,
              //系列柱之间的间距
              barGap: "0%",
              //柱条样式
              itemStyle: {
                  color: "#556fc6"
              },
              //选中变小手
              cursor: "pointer"
          }
      ]
  }
  // 4.将设置和数据挂载到图形实例中
  myChart.setOption(option);
})
</script>

<style scoped>
.chart {
  width: 700px;
  height: 300px;
  /* 过渡 */
  transition: 0.5s all linear;
}

.chart:hover {
  /* 缩放 */
  transform: scale(1.025);
  /* 小手 */
  cursor: pointer;
  /* box阴影 */
  box-shadow: 0px 0px 30px gray;
}
</style>